<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./assets/global.css">
    <style>
        .container {
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            background-color: #000;
            flex-direction: column;
            filter: contrast(30);
        }

        .drop {
            width: 100px;
            height: 100px;
            border-radius: 50%;
            position: absolute;
            filter: blur(20px);
            background-color: #fff;
            opacity: 0;
            animation: 2.5s drop linear infinite;
        }

        .drop:nth-child(2) {
            transform: translateY(-80px);
            animation-delay: .5s;
        }

        .drop:nth-child(3) {
            transform: translateY(-130px);
            animation-delay: .7s;
        }

        .collection {
            width: 100px;
            height: 100px;
            border-radius: 50%;
            background-color: #fff;
            filter: blur(20px);
            animation: 3s collection linear infinite;

        }

        span {
            position: absolute;
            font-style: 30px;
        }

        @keyframes drop {
            0% {
                transform: scale(.7) translateY(-600%);
                opacity: 0;
            }

            50% {
                transform: scale(.4) translateY(-8%);
                opacity: 1;
            }

            100% {
                transform: scale(.3) translateY(0%);
                opacity: 1;
            }
        }

        @keyframes collection {
            0% {
                transform: scale(1) rotate(0deg)
            }

            50% {
                transform: scale(1.3) rotate(180deg);
                width: 90px;
                border-top-left-radius: 40%;
                border-bottom-right-radius: 45%;
            }

            100% {
                transform: scale(1) rotate(360deg);
            }
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="drop"></div>
        <div class="drop"></div>
        <div class="drop"></div>

        <div class="collection"></div>
        <span>80%</span>
    </div>
</body>

</html>